<template>
  <div>
    <div class="bill-detail-box ">
      <div class="bill-title">
        <h2 style="font-size: 22px!important;;font-weight: bolder"><img src="../../../../assets/images/logo_n.png" alt="">马力科技电子仓单</h2>
      </div>
      <div class="div-table-type" style="border-right:none;border: none">
        <div style="margin-top: 30px; margin-left: -20px;border-right:none">仓单规范遵照: GB/T 30332-2013</div>
        <div style="margin-top: 30px; margin-left: -60px;">签发时间：2018-09-06 18:27 &nbsp;&nbsp;&nbsp;
          <span style="color:black;margin-left: 138px;font-weight:bold;font-size:14px;">
                    No：ML1809061827000037
                </span>
        </div>
      </div>
      <div class="elec-div-table">
        <div class="div-table-unit bg-f8f9fb">
          <div class="br0" style="background-color:white;border: 1px solid #333333">
            <p>存货人(单位)：ZG测试货主公司</p>
          </div>
          <div style="background-color:white;border: 1px solid #333333">
            <p>存货人地址：ZG公司地址</p>
          </div>
        </div>
        <div class="div-table-unit">
          <div class="br0" style="border: 1px solid #333333">
            <p>仓 单 持 有 人：ZG测试货主公司</p>
          </div>
          <div style="border: 1px solid #333333">
            <p>保管仓库地址：江西南昌市高新区</p>
          </div>
        </div>
        <div class="div-table-unit bg-f8f9fb">
          <div class="br0" style="background-color:white;border: 1px solid #333333;border-bottom: none">
            <p>仓储物损耗标准：0</p>
          </div>
          <div style="background-color:white;border: 1px solid #333333;border-bottom: none">
            <p>仓储费率：按仓储协议约</p>
          </div>
        </div>
        <div class="div-table-item title" style="background-color: #e3e4e6;border-top:1px solid #333333;">
          <span>仓储物名称</span>
          <span>规格</span>
          <span>包装</span>
          <span>单位</span>
          <span>数量</span>
          <span>生产厂家</span>
          <span>生产批号</span>
          <span>原产地</span>
          <span>总重量(kg)</span>
        </div>
        <div class="div-table-item striped" style="background-color: white;border-top: none;">
          <span>牛脖肉</span>
          <span>25KG/每箱</span>
          <span>纸箱</span>
          <span>件</span>
          <span>200</span>
          <span title="SIF4507">SIF4507</span>
          <span>sc&nbsp;</span>
          <span title="巴西">巴西</span>
          <span>3000</span>
        </div>
        <div class="div-table-item striped">
          <span style="background-color:white;">哈希值</span>
          <span style="width: 794px;text-align:left;background-color:white;margin-left:-5px;padding-left:10px;border-right: none" id="hashValue">3ad8e7f6943357eae1c876f890c67fe8fabb27e2af86d691d90f0fc7a3f2d30d</span>
        </div>
        <div class="div-table-money" style=" border-left: 1px solid #333333;border-right: 1px solid #333333;">
          <div class="money-unit" style="width:123px;flex-basis: 123px;border: 1px solid #333333;border-top: none;border-left: none">仓单货值(大写)<br>(USD)</div>
          <div class="money-amount" style="width: 337px;border: 1px solid #333333;border-left:none;border-top: none">
            <span>美金柒万伍仟元整整</span>
          </div>
          <div class="money-unit" style="border: 1px solid #333333;border-left:none;border-top: none">仓单货值(小写)<br>(USD)</div>
          <div class="money-amount" style="border: 1px solid #333333;border-left:none;border-top: none;border-right: none">
            <span style="margin-right: 170px;border-left:none;border-top: none;border-right: none">$75000</span>
          </div>
        </div>

        <div class="div-table-money" style="border: 1px solid #333333;">
          <div class="money-unit" style="width:230px;flex-basis: 228px;padding-top: 20px;border: 1px solid #333333;margin-left: 0.5px;border-left: none">交货人：周</div>
          <div class="money-amount" style="width:230px;border: 1px solid #333333;border-left:none;">
            <span>收货人：张三</span>
          </div>
          <div class="money-unit" style="width:230px;flex-basis: 228px;padding-top: 20px;border: 1px solid #333333;border-left:none;"> 保管人（单位全称）盖章：</div>
          <div class="money-amount" style="width:230px;border: 1px solid #333333;border-left:none;border-right: none">
            <span>ZG仓库公司</span>
          </div>
        </div>

      </div>
      <div class="">
        <a class=" goSource" style="background-color: #1378f2; color: white;" onclick="goSourcePage(176)">查看仓单溯源</a>
      </div>
    </div>
    <div class="bill-detail-box">
      <div class="bill-title">
        <h2 style="font-size: 22px!important;;font-weight: bolder"><img src="../../../../assets/images/logo_n.png" alt="">马力科技电子仓单<i style="font-size: 18px!important;;font-weight: bolder">（背书联）</i></h2>
      </div>
      <div class=" mt20">
        <table class="table table-bordered">
          <tbody><tr class="bg-f8f9fb">
            <th class="text-left">背书人签章</th>
            <th class="text-left">背书人签章</th>
          </tr>
          <tr>
            <td style="border: 1px solid #333333;">
              <div class="bei-seal">

                <p>同意仓单质押</p>
                <p class="">签章人：12212</p>
                <p class="">2018-10-15</p>
              </div>
            </td>
            <td style="border: 1px solid #333333;border-left: none;">
              <div class="bei-seal">
                <p>同意仓单解押</p>
                <p class="">签章人：12212</p>
                <p class="">2018-10-15</p>
              </div>
            </td>
          </tr>
          <tr class="bg-f8f9fb">
            <th class="text-left">保管人签章</th>
            <th class="text-left">保管人签章</th>
          </tr>
          <tr>
            <td style="border: 1px solid #333333;">
              <div class="bei-seal">
                <p>同意仓单质押</p>
                <p class="">签章人：12212</p>
                <p class="">2018-10-15</p>
              </div>
            </td>
            <td style="border: 1px solid #333333;border-left: none;">
              <div class="bei-seal">
                <p>同意仓单解押</p>
                <p class="">签章人：12212</p>
                <p class="">2018-10-15</p>
              </div>
            </td>
          </tr>
          <tr class="bg-f8f9fb">
            <th class="text-left">被背书人签章</th>
            <th class="text-left">被背书人签章</th>
          </tr>
          <tr>
            <td style="border: 1px solid #333333;">
              <div class="bei-seal">
                <p>同意仓单质押</p>
                <p class="">签章人：12212</p>
                <p class="">2018-10-15</p>
              </div>
            </td>
            <td style="border: 1px solid #333333;border-left: none;">
              <div class="bei-seal">
                <p>同意仓单解押</p>
                <p class="">签章人：12212</p>
                <p class="">2018-10-15</p>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="2" style="border: 1px solid #333333;border-top: none;" class="text-left">签发时间：2018-09-06 18:27 &nbsp;&nbsp;&nbsp;No：ML1809061827000037</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
export default{};
</script>
<style>
  div,p,td{
    font-size:14px!important;
  }
  .elec-div-table{
    font-size: 14px!important;
    margin-top:24px;
    position: relative;
  }
  .elec-div-table img.table-seal{
    position: absolute;
    bottom:8px;
    right:36px;
  }
  .div-table-unit{
    display: flex;
    justify-content: space-between;
    border-collapse: collapse;
    margin-top:-1px;
  }
  .div-table-unit>div{
    flex-basis: 460px;
    border:1px solid #e5e5e5;
    border-collapse: collapse;
    padding-top:4px;
    padding-bottom:4px;
  }
  .div-table-unit>div>p{
    line-height:30px;
    text-indent:20px;
    font-size:14px!important;;
    color:#4c4c4c;
  }
  .div-table-item{
    border:1px solid #333333;
    border-top:none;
    line-height:40px;
    height:40px;
    overflow: hidden;
  }
  .div-table-item.striped:nth-child(odd){
    background-color:#f8f9fb;
  }
  .br0{
    border-right:none!important;
  }
  .div-table-item span{
    display:inline-block;
    text-align: center;
    white-space: nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:40px;
    height:40px;
    font-size:14px;
  }
  .div-table-item span:nth-child(1){
    width:122px;
    border-right:1px solid #333333;
    text-align:center;
  }
  .div-table-item span:nth-child(2){
    width:80px;
    display: inline-block;
    border-right:1px solid #333333;
  }
  .div-table-item span:nth-child(3){
    width:80px;
    display: inline-block;
    border-right:1px solid #333333;
  }
  .div-table-item span:nth-child(4){
    width:80px;
    display: inline-block;
    border-right:1px solid #333333;
  }
  .div-table-item span:nth-child(5){
    width:78px;
    display: inline-block;
    border-right:1px solid #333333;
  }
  .div-table-item span:nth-child(6){
    width:80px;
    display: inline-block;
    min-width:80px;
    border-right:1px solid #333333;
  }
  .div-table-item span:nth-child(7){
    width:122px;
    display: inline-block;
    border-right:1px solid #333333;
  }
  .div-table-item span:nth-child(8){
    width:110px;
    display: inline-block;
    border-right:1px solid #333333;
  }
  .div-table-item span:nth-child(9){
    width:110px;
    display: inline-block;
    border-right:none;
  }
  .div-table-item span:nth-child(10){
    width:100px;
    border-right:none;
  }
  .div-table-item.title{
    height:40px;
    line-height:40px;
    font-size:14px;
  }
  .div-table-money{
    border:1px solid #e5e5e5;
    border-top:none;
    height:60px;
    display: flex;
    justify-content: flex-start;
    align-items:center;
    overflow: hidden;
  }
  .div-table-money .money-unit{
    flex-basis:140px;
    width:140px;
    border-right:1px solid #e5e5e5;
    display: inline-block;
    height:60px;
    text-align:center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top:16px;
  }
  .div-table-money .money-amount span:nth-child(1){
    display: inline-block;
    text-align:center;
    color:#4c4c4c;
    padding-top:20px;
    font-size:14px;
  }
  .div-table-money .money-amount span:nth-child(2){
    font-size:16px!important;;
  }
  .div-table-money .money-amount span:nth-child(2) i{
    font-style:normal;
    color:#333333;
    font-size:14px!important;;
  }

  .div-table-money .money-amount{
    border-right:1px solid #e5e5e5;
    height:60px;
    width:320px;
    text-align: center;

  }
  .div-table-money .money-amount:last-child{
    border:none;
  }
  .div-table-type{
    display: flex;
    border:1px solid #e5e5e5;
    border-top:none;
    height:40px;
    position: relative;
  }

  .div-table-type div:nth-child(1){
    width:458px;
    height:40px;
    border-right:1px solid #e5e5e5;
    line-height:40px;
    text-indent:20px;
  }
  .div-table-type div:nth-child(2){
    text-indent:20px;
    height:40px;
    line-height:40px;
  }
  .bill-con table{
    background: #fff;
    border-color:#e5e5e5!important;
  }
  .bill-con table th,.bill-con table td{
    border-color:#e5e5e5!important;
  }
  .table-bordered.text-left{
    text-indent:20px;
  }
  .div-table-item.striped:nth-child(even){
    background-color: #f5f6f7;
  }
.div-table-type {
  display: flex;
  border: 1px solid #e5e5e5;
  border-top: none;
  height: 40px;
  position: relative;
}
.div-table-type div:nth-child(1) {
  width: 458px;
  height: 40px;
  border-right: 1px solid #e5e5e5;
  line-height: 40px;
  text-indent: 20px;
}
.div-table-type div:nth-child(2) {
  text-indent: 20px;
  height: 40px;
  line-height: 40px;
}
.bill-detail-box{
  width: 960px;
  border: 1px solid #333333;
  box-sizing: border-box;
  padding: 30px 20px 30px 20px;
  background-color: #fff;
  margin-top: 20px;
}
.bill-title{
  text-align: center;
}
.bill-title h2{
  font-size: 22px!important;
  font-weight: bolder;
}
.bill-title h2 img{
  margin-right: 6px;
  vertical-align: middle;
}
.mt20{
  margin-top: 20px!important;
}
.table{
  background: #fff!important;
  width:100%;
  height:100%;
}
.bg-f8f9fb{
  color:#f8f9fb!important;
}
.table-bordered .text-left {
  text-align: left;
  font-size: 14px!important;
  text-indent: 14px;
  background-color: #e3e4e6;
  color: #4c4c4c;
}
tr td{
  white-space: nowrap;
  height: 40px;
  line-height: 1.42857143;
  vertical-align: middle;
  text-align: center;
  border-collapse: collapse;
}
.table-bordered {
  border: 1px solid #dddddd;
}
.table tr th{
  background-color: #f5f6f7;
  font-weight: normal;
  padding-top: 7px!important;
  padding-bottom: 7px!important;
  font-size: 14px!important;
  color: #000;
  border: 1px solid #333333!important;
}
.bei-seal {
  position: relative;
  height: 130px;
}
.table{
  border-collapse: collapse;
}
.bill-title h2 i {
  font-size: 18px!important;
  font-weight: normal;
  font-style: normal;
  color: #666;
}
.bei-seal p:first-child {
  position: absolute;
  font-size: 16px!important;;
  left: 11px;
  top: 53px;
}
.bei-seal p:nth-child(2) {
  position: absolute;
  bottom: 30px;
  right: 25px;
}
.bei-seal p:nth-child(3) {
  position: absolute;
  bottom: 12px;
  right: 25px;
}
</style>
